.user-info {
  width: 100%;
  height: 450px;
  position: relative;

  .user-info-img {
    width: 100%;
    height: 100%;
    vertical-align: bottom;
  }

  .user-info-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.2);
  }

  .user-info-detail {
    width: 100%;
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 100px;

    .user-info-detail-follower,
    .user-info-detail-avator,
    .user-info-detail-follow {
      flex: 1;

      .user-info-detail-follower-num,
      .user-info-detail-follower-name {
        display: block;
        color: #fff;
        height: 72px;
        width: 50%;
        text-align: center;

        &:first-of-type {
          line-height: 100px;
          font-size: 40px;
        }

        &:last-of-type {
          line-height: 40px;
          font-size: 28px;
        }
      }
    }

    .user-info-detail-avator {
      text-align: center;

      .user-info-detail-avator-img {
        width: 144px;
        height: 144px;
        border-radius: 50%;
      }
    }

    .user-info-detail-follower {

      .user-info-detail-follower-num,
      .user-info-detail-follower-name {
        margin-left: 50%;
      }
    }
  }

  .user-info-name {
    position: absolute;
    width: 100%;
    font-size: 36px;
    text-align: center;
    bottom: 100px;
    color: #fff;
  }
}